In the last post we learned that components can be used like HTML elements (after importing them) and props can be used like HTML attributes .

Here we have a component Profile.svelte where we can add or remove skillpoints and display them.

<script>
	export let name;
	export let status;
	export let onSkillPointChange;

	let skillPoints = 5;
	function decrementSkillPoints() {
		if (skillPoints > 0) {
			skillPoints--;
		}
		onSkillPointChange(skillPoints);
	}
	function incrementSkillPoints() {
		skillPoints++;
		onSkillPointChange(skillPoints);
	}
</script>

<section>
	<dl>
		<dt>Name</dt>
		<dd>{name}</dd>
		<dt>Status</dt>
		<dd>{status}</dd>
	</dl>

	<div class="flex gap-5 p-2 [&>*]:text-2xl">
		<button class="px-8" on:click={decrementSkillPoints}>-</button>
		<p class="self-center">{skillPoints}</p>
		<button class="px-8" on:click={incrementSkillPoints}>+</button>
	</div>
</section>

As you can see we can also send functions in props .

<script>
	import Profile from "./Profile.svelte";

	function onSkillPointChange(newSkillPoints) {
		console.log("onSkillPointChange: " + newSkillPoints);
	}
</script>

<Profile name="Henrik" status="Learning Svelte" {onSkillPointChange} />

We can improve the code in Profile.svelte by using a reactive statement for the function prop instead of running it in both to the increment and decrement functions.

<script>
	export let name;
	export let status;
	export let onSkillPointChange;

	let skillPoints = 5;

	// This will rerun whenever skillPoints changes
	$: onSkillPointChange(skillPoints);

	function decrementSkillPoints() {
		if (skillPoints > 0) {
			skillPoints--;
		}
	}
	function incrementSkillPoints() {
		skillPoints++;
	}
</script>

<section>
	<dl>
		<dt>Name</dt>
		<dd>{name}</dd>
		<dt>Status</dt>
		<dd>{status}</dd>
	</dl>

	<div class="flex gap-5 p-2 [&>*]:text-2xl">
		<button class="px-8" on:click={decrementSkillPoints}>-</button>
		<p class="self-center">{skillPoints}</p>
		<button class="px-8" on:click={incrementSkillPoints}>+</button>
	</div>
</section>

We have a problem though because we assume that {onSkillPointChange} is always passed in as a functions so it won't work if we don't pass it in.

There are two ways we can fix this:

• Check if onSkillPointChange is actually a function

$: if (typeof onSkillPointChange === "function") onSkillPointChange(skillPoints);

Here we check if it's a function and if it is we call it.

• Another way is to add a default value for onSkillPointChange:

export let onSkillPointChange = () => {};

We usually want to avoid strongly coupling components to events because it's more flexible to only use events when you need them. For example HTML buttons don't require you to add event listeners for every type of interaction by default, instead you can add them if you need them .

To make the prop optional we could have a check to see if it is defined .

$: if (onSkillPointChange) onSkillPointChange(skillPoints);

There's an even better way though, component events .

By creating an event dispatcher in our child component we can create a custom event that the parent can optionally listen to .

<script>
  import { createEventDispatcher } from "svelte";
	export let name;
	export let status;

  // this must be top level
  const dispatch = createEventDispatcher();

	let skillPoints = 5;

  // skillPointChange is the name of the custom event
	$: dispatch("skillPointChange", skillPoints);

	function decrementSkillPoints() {
		if (skillPoints > 0) {
			skillPoints--;
		}
	}
	function incrementSkillPoints() {
		skillPoints++;
	}
</script>

<section>
	<dl>
		<dt>Name</dt>
		<dd>{name}</dd>
		<dt>Status</dt>
		<dd>{status}</dd>
	</dl>

	<div class="flex gap-5 p-2 [&>*]:text-2xl">
		<button class="px-8" on:click={decrementSkillPoints}>-</button>
		<p class="self-center">{skillPoints}</p>
		<button class="px-8" on:click={incrementSkillPoints}>+</button>
	</div>
</section>

and to actually use it we add on:skillPointChange on the component and in the function take in event and send event.detail .

<script>
	import ProfileEventDispatcher from "./ProfileEventDispatcher.svelte";

	function onSkillPointChange(event) {
		console.log("onSkillPointChange: " + event.detail);
	}
</script>

<ProfileEventDispatcher
	name="Henrik"
	status="Learning Svelte"
	on:skillPointChange={onSkillPointChange} />

If we do it this way we don't have to listen to the event if we don't want to.

<script>
	import ProfileEventDispatcher from "./ProfileEventDispatcher.svelte";

	function onSkillPointChange(event) {
		console.log("onSkillPointChange: " + event.detail);
	}
</script>

<ProfileEventDispatcher
	name="Henrik"
	status="Learning Svelte"
	on:skillPointChange={onSkillPointChange} />

<!-- clicking the buttons here will not log in the console -->
<ProfileEventDispatcher name="Henrik again" status="Learning about component events" />

By doing this we can make the event optional .